<%@ page import="com.okaysoft.ofb.Task" %>
<!doctype html>
<html>
<head>
    <title>任务信息</title>

    <g:javascript src="jquery.js"/>
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'jquery.mobile-1.2.0.min.css')}" type="text/css">
    <g:javascript src="jquery.mobile-1.2.0.min.js"/>
    <script>
        var task=${ts}

        function SetInfo(){
            var st;
            st="<table class='port'><tr><th>AB面</th><th>机框号</th><th>盘号</th><th>端子号</th></tr>";
            st=st+"<tr><td align='center'>"+task.ZG.district+"</td><td align='center'>"+task.ZG.jk+"</td><td align='center'>"+task.ZG.letter+"</td><td align='center'>"+task.ZG.letterNumber+"</td></tr></table>";
            $("#Base_ZG").html(st);

            st="<table class='port'><tr><th>AB面</th><th>机框号</th><th>盘号</th><th>端子号</th></tr>";
            for(var i=0;i<task.PX.length;i++)
            {
                st=st+"<tr><td align='center'>"+task.PX[i].district+"</td><td align='center'>"+task.PX[i].jk+"</td><td align='center'>"+task.PX[i].letter+"</td><td align='center'>"+task.PX[i].letterNumber+"</td></tr>";

            }
            st=st+"</table>";
            $("#Base_PX").html(st);

            st="<table class='port'><tr><th>AB面</th><th>机框号</th><th>盘号</th><th>端子号</th><th>分光器端口号</th></tr>";
            for(var i=0;i<task.PX.length;i++)
            {
                st=st+"<tr><td align='center'>"+task.PX[i].district+"</td><td align='center'>"+task.PX[i].jk+"</td><td align='center'>"+task.PX[i].letter+"</td><td align='center'>"+task.PX[i].letterNumber+"</td><td align='center'>";
                st=st+"<input type='number' name='dkh' id='port_"+task.PX[i].id+"' value='' data-mini='true' style='width:50px'/>";
                st=st+"</td></tr>";

            }
            st=st+"</table>";
            $("#Done").html(st);
        }

        function ywfgChange(t){
            var v=t.options[t.selectedIndex].value;
            if(v==0){
                $("#tr_fgqxh").css("display","none");
                $("#tr_fgb").css("display","none");
                $("#tr_done").css("display","none");
            }else{
                $("#tr_fgqxh").css("display","");
                $("#tr_fgb").css("display","");
                $("#tr_done").css("display","");
            }
        }
         $(function(){
             var fg = ${zg?.splitter?:false};
             if(!fg) {
                 $("#ywfg").val('0').slider("refresh");  ;
                 $("#tr_fgqxh").css("display","none");
                 $("#tr_fgb").css("display","none");
                 $("#tr_done").css("display","none");
             } else{
                 $("#ywfg").val('1').slider("refresh");  ;
                 $("#tr_fgqxh").css("display","");
                 $("#tr_fgb").css("display","");
                 $("#tr_done").css("display","");
             }
             $("#task_form").submit(function(){
                 var frm = $(this);
                 var url = frm.attr("action") ;

                 var zgId =$("#zgTerminal").val();
                 var remark = $("#remark").val();
                 var fgqxh = $("#fgqxh").val();
                 var ywfg = $("#ywfg").val();
                 var fgb = $("#fgb").val();
                 var taskId=$("#taskId").val();
                 var dkh = $("#task_form input[name='dkh']");
                 var pxs = '';
                 var dkhs = '';
                 dkh.each(function(){
                     var t = $(this)
                     if(pxs) {
                         pxs += ',';
                     }
                     if(dkhs ) {
                         dkhs += ',';
                     }
                     var pid = t.attr("id");
                     var pids = pid.split('_')
                     dkhs += t.val()

                     pxs += pids[1];
                 })
                 
                 $.post(url,{taskId:taskId,zgId:zgId,zgfgq:fgqxh,zgfgb:fgb,fgq:ywfg,pxId:pxs,pxfgq:dkhs,sm:remark},function(data){
                     var res = $.parseJSON(data);
                     if(res.status == '1') {
                         window.location.href='taskResult'
                     }else if(res.status == '2'){
                         window.location.href='taskResult'
                     }else{
                         alert("操作失败")
                     }
                 })
                 

                 return false;
             })
         })
    </script>
    <style>
    table.port{border: 1px solid black;width:100%}
    </style>
</head>
<body onLoad="SetInfo()">

<div data-role="page">
    <div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="d" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
        <h3>任务基本信息</h3>
        <p>
        <table id="TaskInfo">
            <tr><th>任务类型</th><td>跳纤</td></tr>
            <tr><th>主干端子</th><td><div id="Base_ZG"></div></td></tr>
            <tr><th>配线端子</th><td><div id="Base_PX"></div></td></tr>
            <tr><th>备　　注</th><td><div id="Base_Remark"></div></td></tr>
        </table>
    </p>
    </div>

    <div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="d" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
        <h3>完成情况</h3>
        <form method="post" action="${createLink(action: 'saveTask',controller: 'api')}" id="task_form">
            <g:hiddenField name="zgTerminal" value="${zg?.id}"/>
            <g:hiddenField name="taskId" value="${task?.id}"/>
            <table id="TaskInfo">
                <tr><th align='right'><label for="slider2">有无分光:</label></th>
                    <td>

                        <select name="ywfg" id="ywfg" data-role="slider" onChange="ywfgChange(this);">

                            <option value="1">有</option>

                            <option value="0">无</option>

                        </select>

                    </td>
                </tr>
                <tr id="tr_fgqxh"><th align='right'><label>分光器型号:</label></th>
                    <td><input type="text" name="fgqxh" id="fgqxh" value="" data-mini="true"/></td>
                </tr>
                <tr id="tr_fgb"><th align='right'><label>分光比:</label></th>
                    <td><table><tr><td>1/</td><td><input type="number" name="fgb" id="fgb" value="" data-mini="true" style="width:60px" /></td></tr></table></td>
                </tr>
                <tr id="tr_done"><td colspan="2"><div id="Done"></div></td></tr>
                <tr><td colspan="2">
                    <label for="textarea-a"><b>特殊说明:</b></label>
                    <textarea name="remark" id="remark" style="width:400px"></textarea>
                </td></tr>
            </table>
            <input type="submit" value="完成"  data-theme="a" />
        </form>
    </div>
</div>

</body>
</html>